import { ref, createApp } from "vue";
import TradingTable from "@/content-scripts/components/table/TradingTable.vue";
import Antd from "ant-design-vue";
import { get } from "@/http/http";

let deliveryApp = null;

export async function createTableBottomDelivery(params = {}) {
    console.log(params, "createTableBottomDelivery params");
    // const container =
    //     document.querySelector(".scroll-table-bottom-box > .table-scroll-window > div > .tr-table__wrapper") ||
    //     document.querySelector('.scroll-table-bottom-box > .table-scroll-window > .tr-table__wrapper');
    const containerGroup = document.querySelectorAll(
        ".bottom-table-container > div.table-scroll-con"
    );
    let container = null;
    containerGroup.forEach((item) => {
        console.log(item);

        console.log(item.querySelector(".bottom-position-table"));
        const tableElement =
            item.querySelector(".bottom-position-table") ||
            item.querySelector(".position-table");

        if (tableElement.style.display != "none") {
            container = item;
        }
    });
    console.log(container, "cccccccccccccccctainer");

    // const table = container.querySelector('.tr-trade__table')
    // table.style.display = 'none'
    // 请求接口，获取数据
    // params是修改的数据
    const { tableSource, tableColumns } = await getBottomTableList(params);

    if (!container) {
        console.log(
            "未找到.scroll-table-bottom-box > .table-scroll-window > div > .tr-table__wrapper，表格区域"
        );
    }

    const existingOverlay = container.querySelector(".my-delivery-table-overlay");
    if (existingOverlay) {
        existingOverlay.remove();
    }

    const overlay = document.createElement("div");
    overlay.setAttribute("class", "my-delivery-table-overlay");
    overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        " left: 0;\n" +
        " top: 0;\n" +
        " width: 100%;\n" +
        " height: 100%;\n"
    );

    const tableStyle = {
        // fontSize: "12px",
        color: "#8e949e",
        // background: "#F8F9FB",
    };

    // 挂载元素
    const appContainer = document.createElement("div");

    deliveryApp = createApp(TradingTable);
    deliveryApp.provide("tableSource", tableSource);
    deliveryApp.provide("tableColumns", tableColumns);
    deliveryApp.provide("tableStyle", tableStyle);
    deliveryApp.use(Antd);
    deliveryApp.mount(appContainer);
    console.log("TradingTable");

    container.style.position = "relative";
    overlay.appendChild(appContainer);
    container.appendChild(overlay);
}

import {
    positionCol,
    historyPositionCol,
    currentCommOrdinaryCol,
    currentCommConditionCol,
    historyCommOrdinaryCol,
    historyCommConditionCol,
    transactionRecordCol,
    capitalFlowCol,
} from "@/content-scripts/components/table/columns/deliveryColumns.js";

async function getBottomTableList(params) {
    let tableSource = ref([]);
    let tableColumns = ref([]);
    if (
        params.firstStageTabs.includes("仓位") &&
        !params.firstStageTabs.includes("历史仓位")
    ) {
        const dataSource = await get("/delivery/position/list", params);
        console.log(dataSource, "dataSource");
        tableSource = dataSource.data;
        tableColumns = positionCol;
    }
    if (params.firstStageTabs.includes("历史仓位")) {
        const dataSource = await get("/delivery/history/position", params);
        console.log(dataSource, "dataSource");
        tableSource = dataSource.data;
        tableColumns = historyPositionCol;
    }
    if (params.firstStageTabs.includes("成交记录")) {
        const dataSource = await get("/delivery/transaction/record");
        console.log(dataSource, "dataSource");
        tableSource = dataSource.data;
        tableColumns = transactionRecordCol;
    }
    if (params.firstStageTabs.includes("资金流水")) {
        const dataSource = await get("/delivery/capital/flow");
        console.log(dataSource, "dataSource");
        tableSource = dataSource.data;
        tableColumns = capitalFlowCol;
    }
    if (params.firstStageTabs.includes("当前委托")) {
        const dataSource = await get("/delivery/current/commission");
        console.log(dataSource, "dataSource");
        tableSource = dataSource.data;
        if (params.commissionValue == "普通委托") {
            tableColumns = currentCommOrdinaryCol;
        } else if (params.commissionValue == "条件委托") {
            tableColumns = currentCommConditionCol;
        }
    }
    if (params.firstStageTabs.includes("历史委托")) {
        const dataSource = await get("/delivery/commission/history");
        console.log(dataSource, "dataSource");
        tableSource = dataSource.data;
        if (params.commissionValue == "普通委托") {
            tableColumns = historyCommOrdinaryCol;
        } else if (params.commissionValue == "条件委托") {
            tableColumns = historyCommConditionCol;
        }
    }

    return { tableSource, tableColumns };
}
